<template>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @change="handleChange"
      @prev-click="prev"
      @next-click="next"
      id="pagination"
    />
</template>
<script lang="ts" setup>
import {ref} from 'vue'
const props = defineProps(['total'])
let currentPage = ref(1)
let pageSize = ref(10)
const emits = defineEmits(["pagination"])
let handleChange = (currentPage:any,pageSize:any)=>{
  // console.log(currentPage,pageSize)
  emits("pagination",currentPage,pageSize)
  return 'pagination changed!'
}
let prev = (value:any)=>{
  emits("pagination",currentPage,pageSize)
}
let next = (value:any)=>{
  emits("pagination",currentPage,pageSize)
}
</script>
<style>

</style>